<template>
    <div>
        <!--<div class="title" v-if="!index"></div>-->
        <el-menu ref="menu1" :default-active="activeIndex" class="sidebar" :unique-opened="true" v-if="!index">
            <el-menu-item class="index-menu-item" index="/" @click="urlClick('/user')"> 用户管理
            </el-menu-item>

            <el-menu-item class="index-menu-item" index="/" @click="urlClick('/test')"> 测试
            </el-menu-item>
        </el-menu>
    </div>
</template>
<script>
    export default {
        props: {
            index: {type: Number, default: 0}
        },
        data() {
            return {activeIndex: "/"};
        },
        mounted() {

        },
        computed: {
            menus() {
                var myMenus = jv.main.menus;
                if (!myMenus) return [];

                if (!myMenus.length && jv.main.user.admin) {
                    myMenus.push({name: "完善资料", subMenus: [{url: "/info/corp", name: "企业信息"}]});
                }

                if (!myMenus.length) {
                    return;
                }
                return myMenus;
            }
        },
        methods: {
            setChecked(url) {
                url = url || location.hash.slice(1).split("?")[0];

                if (url == "/") {
                    this.activeIndex = "/";
                    return;
                }

                var vueItem = this.$refs.menu.items[url];
                if (!vueItem) {
                    url = url.split('/').slice(0, -1).join('/');
                    if (url) {
                        this.setChecked(url);
                    }
                    return;
                }

                this.activeIndex = url;
            },
            urlClick(url) {
                this.$router.push(url);
            }
        }
    }

</script>
<style scoped>
    .title {
        text-align: center;
        line-height: 60px;
        height: 60px;
        font-size: 18px;
        font-weight: bold;
    }
</style>
<style>
    html .sidebar {
        width: 200px;
        z-index: 999;
        overflow: auto;
        user-select: none;
        background-color: #f7f7f7;
        color: #333;
    }

    html .el-menu-item, html .el-submenu__title {
        color: #333;
    }

    html .index-menu-item {
        height: 56px;
        line-height: 56px;
        font-size: 14px;
        color: #333;
        background: #f7f7f7;
        padding: 0 20px;
        cursor: pointer;
        position: relative;
        transition: border-color .3s, background-color .3s, color .3s;
        box-sizing: border-box;
        white-space: nowrap;
    }

    html .el-submenu__title:hover {
        background-color: #fff;
    }

    .index-menu-item:hover {
        background: #fff;
    }

    html .el-menu-item.is-active, html .el-menu-item.is-active .iconfont {
        background: #fff;
        color: #fead04;
    }

    html .el-menu {
        background-color: #f7f7f7;
    }

    html .el-submenu .el-menu-item:hover {
        background-color: #fff;
    }

    html .el-submenu .el-menu-item {
        background-color: #fff;
    }

    html .iconfont {
        color: #999;
    }
</style>
